{% extends "adminlte/base.html" %}
{% load static %}
{% block content_title %}
    {{ page_title }}
{% endblock %}

{% block base_head_style %}
    <style type="text/css">
        input[type='checkbox'] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="row" id="commonDataTableRow">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <div class="row">
                        <div class="col-xs-12 col-sm-6">
                            {% block common_list_buttons %}
                                <button class="btn btn-primary"
                                        v-on:click="create">
                                    <i class="fa fa-plus"></i>
                                    新增
                                </button>
                                <button class="btn btn-danger"
                                        v-on:click="removeSelected">
                                    <i class="fa fa-trash-o"></i>
                                    删除
                                </button>
                            {% endblock %}
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <div class="input-group">
                                <input type="text" name="search"
                                       id="tableSearch"
                                       class="form-control input-sm pull-right"
                                       style="width: 150px;"
                                       placeholder="关键字"
                                       v-on:keypress.13="search">

                                <div class="input-group-btn">
                                    <button class="btn btn-sm btn-default"
                                            v-on:click="resetSearch">
                                        <i class="fa fa-times-circle"></i>
                                    </button>
                                    <button class="btn btn-sm btn-default"
                                            v-on:click="search">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover" id="commonTable">
                        <tbody>
                            <tr>
                                <th style="width:30px;">
                                    #
                                </th>
                                <th style="text-align: center;width:40px;">
                                    <input type="checkbox"
                                           name="checkboxAllRow"
                                           v-on:click="toggleAllBox"/>
                                </th>
                                {% for title in table_titles %}
                                    {% if title == 'ID' %}
                                        <th>
                                            操作
                                        </th>
                                    {% else %}
                                        <th>
                                            {{ title }}
                                        </th>
                                    {% endif %}
                                {% endfor %}
                            </tr>
                            <template v-for="item in items">
                                <tr>
                                    <td style="width:30px;">#[$index+1]</td>
                                    <td style="width:40px;text-align:center">
                                        <input type="checkbox" class="minimal"
                                               name="checkboxRow"
                                               value="#[item.id]"/>
                                    </td>
                                    {% for field in table_fields %}
                                        {% if field == 'id' %}
                                            <td>
                                                <a href="javascript:void(0);"
                                                   data-pk="#[item.id]"
                                                   v-on:click="detail">
                                                    详情
                                                </a> |
                                                {% block common_list_page_show_modify %}
                                                <a href="javascript:void(0);"
                                                   data-pk="#[item.id]"
                                                   v-on:click="update">
                                                    修改
                                                </a> |
                                                {% endblock %}
                                                <a href="javascript:void(0);"
                                                   data-pk="#[item.id]"
                                                   v-on:click="removeOne">
                                                    删除
                                                </a>
                                            </td>
                                        {% else %}
                                            <td>
                                                {!! item.{{ field }} !!}
                                            </td>
                                        {% endif %}
                                    {% endfor %}
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                {% block common_list_pagination %}
                    <div class="box-footer clearfix">
                        {% include 'adminlte/common_list_pagination.html' %}
                    </div>
                {% endblock %}
            </div>
        </div>
    </div>
{% endblock %}

{% block base_foot_page_script %}
    <script src="{% static 'adminlte/js/common-list-page-base.js' %}"
            type="text/javascript"></script>
    {% block common_list_foot_page_script %}
        <script src="{% static 'adminlte/js/common-list-page.js' %}"
                type="text/javascript"></script>
    {% endblock %}
{% endblock %}